<template>
  <div class="choice_problem_div">
    <div class="name">
      <div class="name_title">题目名称:</div>
      <div class="name_content">
        {{ data.name }}
      </div>
    </div>
    <div class="difficulty">
      <div class="difficulty_title">题目难度:</div>
      <div class="difficulty_content">
        {{ data.difficulty }}
      </div>
    </div>
    <div class="status">
      <div class="status_title">是否完成:</div>
      <div class="status_content">
        {{ data.isFinish }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["data"],
};
</script>



<style scoped>
.choice_problem_div {
  height: 10vh;
  width: 10vw;
  margin-top: 2vh;
  margin-left: 2vh;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.name {
  height: 2vh;
  width: 10vh;
  margin-top: 1vh;
  margin-left: 1vw;
  display: flex;
  flex-wrap: wrap;
}
.name_title {
  height: 2vh;
  width: 6vh;
}
.name_content {
  height: 2vh;
  width: 2vh;
  line-height: 2vh;
  margin-left: 1vw;
  text-align: center;
}
.difficulty {
  height: 2vh;
  width: 10vh;
  margin-top: 1vh;
  margin-left: 1vw;
  display: flex;
  flex-wrap: wrap;
}
.difficulty_title{
  height: 2vh;
  width: 6vh;
}
.difficulty_content {
  height: 2vh;
  width: 2vh;
  line-height: 2vh;
  margin-left: 1vw;
  text-align: center;
}
.status {
  height: 2vh;
  width: 10vh;
  margin-top: 1vh;
  margin-left: 1vw;
  display: flex;
  flex-wrap: wrap;
}
.status_title{
  height: 2vh;
  width: 6vh;
}
.status_content {
  height: 2vh;
  width: 2vh;
  line-height: 2vh;
  margin-left: 1vw;
  text-align: center;
}
</style>

